<template>
  <div :id="mapId" class="uni-map"></div>
</template>

<script>
  import * as HMAP from './hmap.manage.js'
  import * as XcUtil from '../../utils/xcutil.js'
  var userList = []
  export default {
    name: 'LoraMap',
    data() {
      return {
        mapId: 'maplora_' + Math.random().toString(36).substr(2),
        mapManager: null,
        floorId: null,
        isUwbShow: false
      }
    },
    activated() {
      if (this.mapManager) {
        this.mapManager.setMapWork(true)
      }
    },
    deactivated() {
      if (this.mapManager) {
        this.mapManager.setMapWork(false)
      }
    },
    beforeDestroy () {
      if (this.mapManager) {
        this.mapManager.destroy()
        this.mapManager = null
      }
    },
    mounted() {
      this.mapManager = new HMAP.Hmap(this.mapId, {
      	mapStorage: false, 						      // 使用地图缓存功能，加快加载速度
        minTiltAngle: 30,
      	viewMode: HMAP.ViewMode.Mode_3D, 	  // 初始二维还是三维状态,默认是3D状态
        maxDistance: 2000000,               // 摄像头最远距离
      });
      this.mapManager.on('onCompass', (e) => {
      	this.$emit("onCompass", e);
      })
      this.mapManager.on('onMapClick', (e) => {
        if(e.object && e.object.objType === "user") {
          var user = XcUtil.getItemById(userList, e.object.objId)
          if(user) {
            this.$emit("onShowUser", user);
          }
        }
      })

      var timer = setInterval(()=>{
      	if(this.buildingList.length > 0) {
      		this._initMap();
      		clearInterval(timer);
      	}
      }, 100);
    },
    methods: {
      setViewMode(mode, callback) {
        this.mapManager.setViewMode(mode == '2D' ? HMAP.ViewMode.Mode_25D: HMAP.ViewMode.Mode_3D, {}, callback);
      },
      showUwb() {

        this.isUwbShow = true;
        for(var key in this.ibeaconsMap) {
          var ibeacon = this.ibeaconsMap[key];
          this.addMarkPoint(key, key, ibeacon['f'], ibeacon['x'],ibeacon['y'],ibeacon['z'], new Date().getTime())
        }
      },
      addMarkPoint(id, name, floorId, x, y, z,flag) {
        this.mapManager.addText({
          floorId: floorId,    							// 必须：楼层
          x: x,															// 必须：坐标x
          y: y,															// 必须：坐标y
          z: z,														  // 必须：坐标z (本楼层中的坐标z)
          text: name,												// 必须：文本内容
          objId: id,												// 必须：这个文本对应的ID,唯一
          objType: 'text',									// 选填：类型区分 默认text
          size: 12,													// 选填：展示大小 默认16
          color: "#333333", 								// 选填：字体的颜色
          canSelect: true,									// 选填：是否能被选中，为true时，onMapClick有数据返回
          crashCheck: false,								// 选填：是否参与碰撞检测，参与的对象之间会进行检测
          sizeAttenuation: false,   				  // 选填：控制图标是否随地图放缩变化，默认 false,就是保持一定大小
          depthTest: true, 									// 选填：开启深度测试设置为false后，不被任何物体遮挡
          flag: flag
        })
        this.mapManager.addMesh({
          objId: id,												// 必须：这个模型对应的ID,唯一
          objType: 'mesh',									// 选填：类型区分 默认mesh
          floorIds: [floorId],    									// 必须：隶属于哪些楼层，如果只有一个，直接添加到该楼层，无/多个添加到scene, 无则不受控制，多个时跟随楼层状态展示
          meshUrl: 'point',											// 必须：模型的url
          canSelect: false,									// 选填: 是否可以被选中
          angle: 0,													// 选填: 旋转角度，0～359
          x: x,															// 必须：坐标x
          y: y,															// 必须：坐标y
          z: z															// 必须：坐标z (本楼层或场景中坐标z)
        })
      },
      drawCircle(position) {
        var uwbStr = position.remarks;
        if(uwbStr != null && uwbStr.length>3) {
          console.log(uwbStr)
          var count = 0;
          this.mapManager.clearCircle();
          var uwbStrList = uwbStr.split(" ");
          var height = 60; // 假设工牌高度0.8米
          for(var i=0; i< uwbStrList.length ; i++) {
          	if(uwbStrList[i] != " ") {
          		var uwbList = uwbStrList[i].split(":");
          		var uwbKey = uwbList[0];
              var uwbData = this.ibeaconsMap[uwbKey];
              if(uwbData) {
                var dis = parseFloat(uwbList[1])*0.39370079; // 工牌到UWB的距离
                var z = uwbData["z"]*39.370079;
                if(dis > z-height){
                  count++
                  if(count<6) {
                    var r = Math.sqrt(dis*dis-(z-height)*(z-height));
                    this.mapManager.addCircle(uwbData["f"], uwbData.x,uwbData.y,height+i, r, this.getRandomColor());
                  }
                }
              }
          	}
          }
        }
      },
      getRandomColor() {
        var letters = "0123456789ABCDEF";
        var color = "#";
        for (var i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      },
      showUsers(_userList, timestamp) {
        userList = _userList;
        this.mapManager.hideImgByType("user");
        _userList.forEach((user)=>{
        	// if(Math.abs(timestamp - (user.posUpdateTime || 0)) < this.onlineTime*1000) {
        	// 	this.showUser(user.id, user, user);
        	// }
          if(user.posUpdateTime && user.posUpdateTime>0 && Math.abs(timestamp - (user.onlineTime || 0)) < this.onlineTime*1000) {
          	this.showUser(user.id, user, user);
          }
        })
      },
      showUsersMap(usersMap) {
      	this.mapManager.hideImgByType("user");
      	for(var userId in usersMap) {
      		var user = usersMap[userId];
      		this.showUser(userId, user, user);
      	}
      },
      isUserShow(userId) {
      	var imgData = this.mapManager.getImgById(userId);
      	if(imgData) {
      		return imgData.visible;
      	} else {
      		return false;
      	}
      },
      hasUser(userId) {
        var imgData = this.mapManager.getImgById(userId);
        return imgData ? true : false;
      },
      showUser(userId, user, position) {
        if(this.isUwbShow) {
          if(!position.remarks || position.remarks.length<3) {
            return;
          }
          this.drawCircle(position);
        }
      	var imgData = this.mapManager.getImgById(userId);
      	if(imgData) {
      		this.mapManager.changePosById(userId, position);
      	} else {
          var imgUrl = this.backParam['userType'+user.userType] || "https://xcfiles.oss-cn-shanghai.aliyuncs.com/xufuji/78a9_35583aeeba030a9cf7f65b98cb5cc65e.png";
          this.mapManager.addImg({
            floorId: position.floorId,    					// 必须：楼层
            x: position.x, 													// 必须：坐标x
            y: position.y,													// 必须：坐标y
            z: position.z || 0,											// 必须：坐标z (本楼层中的坐标z)
            imgUrl: imgUrl,													// 必须：图片url
            objId: userId,													// 必须：这个文本对应的ID,唯一
            objType: 'user',												// 选填：类型区分 默认text
            size: 20,																// 选填：展示大小 默认16
            depthTest: false,
            showInOpacityFLoor: true,								// 选填：是否在透明的楼层展示，默认false不展示
            canSelect: true,												// 选填：是否能被选中，为true时，onMapClick有数据返回
            visible: true
          })
        }

       //    users.forEach((user)=>{
       //      user.poiImage = this.backParam['userType'+user.userType] || "https://xcfiles.oss-cn-shanghai.aliyuncs.com/xufuji/78a9_35583aeeba030a9cf7f65b98cb5cc65e.png"
       //      //this.findNearPointInLu(user); //路网纠正
       //    })

      	// 	var bgUrl = 'https://xcfiles.oss-cn-shanghai.aliyuncs.com/szgt/img/face_bg256.png'
      	// 	XcUtil.getFaceImg(bgUrl, avatarUrl, (imgUrl)=>{
      	// 		this.mapManager.addImg({
      	// 			floorId: position.floorId,    					// 必须：楼层
      	// 			x: position.x, 													// 必须：坐标x
      	// 			y: position.y,													// 必须：坐标y
      	// 			z: position.z || 0,											// 必须：坐标z (本楼层中的坐标z)
      	// 			imgUrl: imgUrl,													// 必须：图片url
      	// 			objId: userId,													// 必须：这个文本对应的ID,唯一
      	// 			objType: 'user',												// 选填：类型区分 默认text
      	// 			size: 50,																// 选填：展示大小 默认16
      	// 			depthTest: false,
      	// 			showInOpacityFLoor: true,								// 选填：是否在透明的楼层展示，默认false不展示
      	// 			canSelect: true,												// 选填：是否能被选中，为true时，onMapClick有数据返回
      	// 			visible: true
      	// 		})
      	// 	})
      	// } else {
       //    var bgUrl = 'https://xcfiles.oss-cn-shanghai.aliyuncs.com/scdx/img/stu_bg'+XcUtil.getRandom(1,5)+'.png'
       //    XcUtil.getNameImg(bgUrl, avatarUrl, (imgUrl)=>{
       //    	this.mapManager.addImg({
       //    		floorId: position.floorId,    					// 必须：楼层
       //    		x: position.x, 													// 必须：坐标x
       //    		y: position.y,													// 必须：坐标y
       //    		z: position.z || 0,											// 必须：坐标z (本楼层中的坐标z)
       //    		imgUrl: imgUrl,													// 必须：图片url
       //    		objId: userId,													// 必须：这个文本对应的ID,唯一
       //    		objType: 'user',												// 选填：类型区分 默认text
       //    		size: 30,																// 选填：展示大小 默认16
       //    		depthTest: false,
       //    		showInOpacityFLoor: true,								// 选填：是否在透明的楼层展示，默认false不展示
       //    		canSelect: true,												// 选填：是否能被选中，为true时，onMapClick有数据返回
       //    		visible: true
       //    	})
       //    })
       //  }
      },
      hideUser(userId) {
      	this.mapManager.hideImgById(userId)
      },
			getMapManager() {
				return this.mapManager;
			},
      reset() {
      	this.mapManager.hideImgAll();
      	this.mapManager.clearSelect();
      	this.mapManager.clearPath();
        this.mapManager.clearLine();
      },
      drawTrack(list) {
        //绘制小尾巴
        this.mapManager.drawLine(list);
      },
      showFloors(activeFloors, opacityFloors, center) {
        if(!this.mapManager) {
          return;
        }
        this.floorId = activeFloors[0];
        this.mapManager.showFloors(activeFloors, opacityFloors);
        if(activeFloors.length + opacityFloors.length > 1) {
          var spreadParam = this.buildingMap[this.floorMap[activeFloors[0]].buildingId];
          this.mapManager.spreadMap({
          	spreadRatio: 10, 								            // 伸缩倍数
          	duration: 2,																// 动画秒数
          	rotateAngle: spreadParam.multiRotateAngle,	// 地图旋转角度
          	tiltAngle: 10,												      // 地图到xy面的角度
          	distance: spreadParam.multiCameraDis,				// 摄像头距离中心点距离
          	targetX: center ? center.x : spreadParam.centerX,								// 目标点X轴
          	targetY: center ? center.y : spreadParam.centerY								// 目标点Y轴
          })
        } else if (activeFloors.length > 0){
          var spreadParam = this.floorMap[activeFloors[0]];
          this.mapManager.spreadMap({
          	spreadRatio: 10, 								            // 伸缩倍数
          	duration: 2,																// 动画秒数
          	rotateAngle: spreadParam.singleRotateAngle,	// 地图旋转角度
          	tiltAngle: spreadParam.singleTiltAngle,			// 地图到xy面的角度
          	distance: spreadParam.singleCameraDis,				// 摄像头距离中心点距离
          	targetX: center ? center.x : spreadParam.centerX,								// 目标点X轴
          	targetY: center ? center.y : spreadParam.centerY								// 目标点Y轴
          })
        }
      },
      resize() {
        this.$nextTick(() => {
          if (this.mapManager) {
            this.mapManager.resize()
          }
        })
      },
      _initMap() {
        this._addFloorList();
        // this._addMerchantList();
        this._addMeshList();
        this._addMakerList();
        this._addRoomList();
      },
      _addFloorList() {
      	this.floorList.forEach((floor)=>{
      		this.mapManager.addFloor({
      			floorId: floor.id,    									// 必须：楼层Id
      			floorName: floor.name,									// 必须：楼层名称
      			floorSort: floor.sort,
      			floorHeight: floor.height,							// 必须: 楼层展示的z坐标
      			floorMap: floor.mapFile,								// 必须: 地图文件
      			buildingId: floor.buildingId,
      			buildingName: floor.buildingName,				// 必须: 所属楼宇
      			road: floor.road,
				longitude: floor.longitude,
				latitude: floor.latitude
      		});
      	})
      },
      _addMerchantList() {
      	this.merchantList.forEach((merchant)=>{
      		this.mapManager.addText({
      			floorId: merchant.floorId,    				// 必须：楼层
      			x: merchant.x,												// 必须：坐标x
      			y: merchant.y,												// 必须：坐标y
      			z: merchant.z,												// 必须：坐标z (本楼层中的坐标z)
      			canSelect: true,
      			text: merchant.name,									// 必须：文本内容
      			objId: merchant.id,										// 必须：这个文本对应的ID,唯一
      			objType: 'merchant',									// 选填：类型区分 默认text
      			size: 12,															// 选填：展示大小 默认16
      			color: "#000000", 										// 选填：字体的颜色
      			shadowColor: "#ffffff",						// 选填：有则加，无则去
      			crashCheck: true,											// 选填：参与碰撞测试
      			meshName: merchant.meshName,					// 选填：对应的模型名称
      			meshColor: merchant.mapColor,					// 选填：对应的模型换成这颜色
      		});
      	})
      },
      _addRoomList() {
        this.roomList.forEach((room)=>{
        	this.mapManager.addText({
        		floorId: room.floorId,    				// 必须：楼层
        		x: room.x,												// 必须：坐标x
        		y: room.y,												// 必须：坐标y
        		z: room.z || 8,												// 必须：坐标z (本楼层中的坐标z)
        		canSelect: false,
        		text: room.name,									// 必须：文本内容
        		objId: room.id,										// 必须：这个文本对应的ID,唯一
        		objType: 'room',									// 选填：类型区分 默认text
        		size: 12,															// 选填：展示大小 默认16
        		color: "#000000", 										// 选填：字体的颜色
        		shadowColor: "#ffffff",						// 选填：有则加，无则去
        		crashCheck: true,											// 选填：参与碰撞测试
        		meshName: '',					// 选填：对应的模型名称
        		meshColor: '',				// 选填：对应的模型换成这颜色
            spriteCenter: 1,      // 选填：哪个点始终保持不变,是中心点对准坐标，还是底部对准坐标
            visible: true
        	});
        })
      },
      _addMakerList() {
      	this.makerList.forEach((maker)=>{
      		this.mapManager.addImg({
      			floorId: maker.floorId,    							// 必须：楼层
      			x: maker.x, 														// 必须：坐标x
      			y: maker.y,															// 必须：坐标y
      			z: maker.z || 0,												// 必须：坐标z (本楼层中的坐标z)
      			imgUrl: maker.map_logo,									// 必须：图片url
      			objId: maker.id,												// 必须：这个文本对应的ID,唯一
      			objType: 'maker',												// 选填：类型区分 默认text
      			size: 20,																// 选填：展示大小 默认16
      			alwaysShow: false,
      			depthTest: false,
      			showInOpacityFLoor: true,								// 选填：是否在透明的楼层展示，默认false不展示
      			canSelect: true,												// 选填：是否能被选中，为true时，onMapClick有数据返回
      			visible: false
      		})
      	})
      },
      _addMeshList() {
      	var index = 0
      	this.meshList.forEach((mesh)=>{
      		this.mapManager.addImg({
      			floorId: mesh.floorId,    					// 必须：楼层
      			x: mesh.x, 													// 必须：坐标x
      			y: mesh.y,													// 必须：坐标y
      			z: mesh.z || 0,											// 必须：坐标z (本楼层中的坐标z)
      			imgUrl: mesh.mesh,									// 必须：图片url
      			objId: 'mesh'+index++,							// 必须：这个文本对应的ID,唯一
      			objType: 'tree',										// 选填：类型区分 默认text
      			size: mesh.size || 350,														// 选填：展示大小 默认16
      			alwaysShow: true,
      			depthTest: true,
      			sizeAttenuation: true,
      			showInOpacityFLoor: true,						// 选填：是否在透明的楼层展示，默认false不展示
      			canSelect: false,										// 选填：是否能被选中，为true时，onMapClick有数据返回
      			visible:  true,
      		})
      	})
      },

    },
    computed: {
      onlineTime() {
        if (!this.$store.state.config.backParam.onlineTime){
          return 60
        }
        return this.$store.state.config.backParam.onlineTime
      },
      backParam() {
        return this.$store.state.config.backParam;
      },
      buildingList() {
      	return this.$store.state.shopdata.buildingList
      },
      buildingMap() {
      	var mapTmp = {};
      	this.buildingList.forEach((building)=>{
      		mapTmp[building.id] = building
      	})
      	return mapTmp
      },
      floorList() {
        return this.$store.state.shopdata.floorList
      },
      floorMap() {
      	var mapTmp = {};
      	this.floorList.forEach((floor)=>{
      		mapTmp[floor.id] = floor
      	})
      	return mapTmp
      },
      merchantList() {
      	return this.$store.state.shopdata.merchantList
      },
      roomList() {
      	return this.$store.state.shopdata.roomList
      },
      meshList() {
      	return this.$store.state.shopdata.meshList
      },
      makerList() {
      	return this.$store.state.shopdata.makerList
      },
      ibeaconsMap() {
        return this.$store.state.shopdata.ibeaconsMap
      }
    }
  }
</script>
<style scoped>
  .uni-map {
    width: 100%;
    height: 100%;
  }
</style>
